<template>
  <div>
    <sub-title :subTitle="'订单列表'" :isRefresh="false"></sub-title>
    <div class="body">
      <div>
        <button class="mall-btn" :class="isactive == 'all'?'active':''" @click="onSubmit('all')">全部订单 (<em
            class="grid-content bg-purple">{{ orderData.allOrder }}</em>)
        </button>
        <button class="mall-btn" :class="isactive == 1?'active':''" @click="onSubmit(1)">待付款 (<em
            class="grid-content bg-purple">{{ orderData.dfk }}</em>)
        </button>
        <button class="mall-btn" :class="isactive == 2?'active':''" @click="onSubmit(2)">待发货 (<em
            class="grid-content bg-purple">{{ orderData.dfh }}</em>)
        </button>
        <button class="mall-btn" :class="isactive == 3?'active':''" @click="onSubmit(3)">已发货 (<em
            class="grid-content bg-purple">{{ orderData.dsh }}</em>)
        </button>
        <button class="mall-btn" :class="isactive == 5?'active':''" @click="onSubmit(5)">已完成 (<em
            class="grid-content bg-purple">{{ orderData.ywc }}</em>)
        </button>
        <button class="mall-btn" :class="isactive == 0?'active':''" @click="onSubmit(0)">已关闭 (<em
            class="grid-content bg-purple">{{ orderData.ygb }}</em>)
        </button>
      </div>
      <div class="filter-wrap">
        <div class="flex h-center between">
          <div>
            <img src="@/assets/order/search.png"> <span class="font-14 gray">筛选查询</span>
          </div>
          <div class="search-wrap">
            <span class="font-14 gray" @click="showSearch" v-show="!visibleSearch">
            <i class="el-icon-arrow-down"></i>
            打开筛选</span>
            <span class="font-14 gray" @click="showSearch" v-show="visibleSearch">
            <i class="el-icon-arrow-up"></i>
            收起筛选</span>
            <el-button class="search" @click='search'>查询结果</el-button>
          </div>
        </div>
        <div class="flex h-center" v-show="visibleSearch">
          <span class="font-14 gray">输入搜索:</span>
          <el-input v-model="searchcode" @keyup.enter.native="search" @clear="search" clearable placeholder="请输入订单编号"
                    class="search-input"></el-input>
          <span class="font-14 gray">用户账号:</span>
          <!-- /手机号码 -->
          <el-input v-model="receiver" @keyup.enter.native="search" @clear="search" clearable placeholder="请输入用户账号"
                    class="search-input">
          </el-input>
        </div>
      </div>
      <div class="box-title flex between h-center">
        <span class="font-20">订单列表</span>
        <div class="flex h-center">
          <el-button @click="exportExcel()">导出订单</el-button>
        </div>
      </div>
      <el-table id="aaa" class="mall-table" :data="tableData" v-loading="loading" @selection-change="tableSelection"
                ref="table" :header-cell-style="headerStyle" :cell-style="tdStyle">
        <el-table-column :selectable="disableSelect" type="selection" width="55"></el-table-column>
        <el-table-column label="订单编号">
          <template slot-scope="scope">{{ scope.row.code }}</template>
        </el-table-column>
        <el-table-column label="提交时间">
          <template slot-scope="scope">{{ scope.row.creatTime }}</template>
        </el-table-column>
        <el-table-column label="用户账号">
          <template slot-scope="scope">{{ scope.row.mobilePhone }}</template>
        </el-table-column>
        <el-table-column label="订单金额">
          <template slot-scope="scope">{{ scope.row.totalMoeny }}</template>
        </el-table-column>
        <el-table-column label="支付方式">
          <template slot-scope="scope">微信小程序支付</template>
        </el-table-column>
        <el-table-column label="订单来源">
          <template slot-scope="scope">微信小程序</template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">{{ scope.row.statuse }}</template>
        </el-table-column>
        <el-table-column label="订单操作">
          <template slot-scope="scope">
            <span class="table-btn" @click="$router.push('/order/list/orderDetail?id=' + scope.row.id+'&mobilePhone='+scope.row.mobilePhone)">查看订单</span>
            <span class="table-btn" v-if="scope.row.status == 2" @click="deliver(scope.row.id)">订单发货</span>
            <span class="table-btn" v-else-if="scope.row.status == 4 || scope.row.status == 5"
                  @click="delivered(scope.row.id)">订单追踪</span>
            <span class="table-btn" v-else-if="scope.row.status == 0" @click="delete(scope.row.id)">删除订单</span>
            <span class="table-btn" v-if="scope.row.status == 1" @click="close(scope.row.id)">关闭订单</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- <pagination @next="next" :isBatch="false" :total="total"></pagination> -->
      <pagination @batchChange="batchChange" @confirmBatch="confirmBatch" @handleChangeAll="handleChangeAll"
                  ref="pagination" @next="next" :optionsList="optionsList" :total="total" :isClear="true"
                  :pageSize="pageSize"></pagination>
      <el-dialog
          title="订单发货"
          :visible.sync="dialogVisible"
          :append-to-body="true">
        <el-form>
          <el-form-item label="快递公司">
            <el-input v-model="sendCompany"></el-input>
          </el-form-item>
          <el-form-item label="快递单号">
            <el-input v-model="sendCode"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="mall-btn" @click="dialogVisible = false">取 消</el-button>
          <el-button class="mall-btn active" @click="add()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
          title="快递追踪"
          :visible.sync="dialogVisibled"
          :append-to-body="true">
        <el-form>
          <el-form-item label="快递公司">
            <el-span v-model="sendCompany">{{company}}</el-span>
          </el-form-item>
          <el-form-item label="快递单号">
            <el-span v-model="sendCode">{{code}}</el-span>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="mall-btn" @click="dialogVisibled = false">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import subTitle from "@/components/subTitle"
  import mixin from "@/utils/mixin"
  import pagination from "@/components/pagination"
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'

  export default {
    mixins: [mixin],
    name: "accountSetting",
    components: {
      subTitle,
      pagination,
    },
    data() {
      return {
        optionsList: {
          'close': '关闭订单',
          'delete': '删除订单'
        },
        checkItemId: [],
        orderData: {},
        input: '',
        tableData: [],
        sendCode: '',
        sendCompany: '',
        total: 1,
        code: '',
        searchcode: null,
        isactive: 'all',
        company: '',
        valpage: 1,
        all: 0,
        id: '',
        all_Unpaid: 0,
        all_Consignment: 0,
        dialogVisible: false,
        dialogVisibled: false,
        all_shipped: 0,
        all_complate: 0,
        status: '',
        all_close: 0,
        receiver: null,
        //  pickerOptions1: {
        //   disabledDate(time) {
        //     return time.getTime() > Date.now();
        //   },
        //   shortcuts: [{
        //     text: '今天',
        //     onClick(picker) {
        //       picker.$emit('pick', new Date());
        //     }
        //   }, {
        //     text: '昨天',
        //     onClick(picker) {
        //       const date = new Date();
        //       date.setTime(date.getTime() - 3600 * 1000 * 24);
        //       picker.$emit('pick', date);
        //     }
        //   }, {
        //     text: '一周前',
        //     onClick(picker) {
        //       const date = new Date();
        //       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
        //       picker.$emit('pick', date);
        //     }
        //   }]
        // },
        value1: '',
        batchVal: '',
      }
    },
    created: function () {
      this.getList(1, this.status);
    },
    methods: {
      closeItem(id) {
        this.$http.post("merchant_order/close", {
          ids: id
        }).then(() => {
          this.orderData.ygb += 1;
          this.orderData.dfk -= 1;
          this.$msgSuc('关闭成功');
          this.search();
        }, (err) => {
          this.$msgErr(err.msg);
        })
      },
      remove(id) {
        this.$confirm("确认删除吗?").then(() => {
          this.$http.post("merchant_order/delete", {
            ids: id
          }).then(() => {
            this.orderData.ygb -= 1;
            this.orderData.allOrder -= 1;
            this.getList();
            this.$msgSuc("删除成功");
          }, (err) => {
            this.$msgErr(err.msg);
          })
        })
      },
      batchChange(val) {
        if (val == 'delete'){
          this.status = 0;
          this.onSubmit(this.status);
        } else if(val == 'close') {
          this.status = 1;
          this.onSubmit(this.status);
        } else {
          this.status = 'all';
          this.onSubmit(this.status);
        }
        this.batchVal = val;
      },
      disableSelect(row) {
        if (this.batchVal == 'delete') {
          if (row.status == 0) {
            return true
          }
        } else if (this.batchVal == 'close') {
          if (row.status == 1) {
            return true
          }
        }
        return false
      },
      getList(pageSize11, status) {
        this.$http.post("merchant_order/getOrderAllCount", {
          merchantId: JSON.parse(this.$store.getters.userInfo).merchantId
        }).then((res) => {
          this.orderData = res;
        });
        this.loading = true;
        var _this = this;
        if (this.searchcode == "") {
          this.searchcode = null;
        }
        if (this.receiver == "") {
          this.receiver = null;
        }
        this.$http.post('/merchant_order/query_for_page', {
          currentPage: pageSize11,
          pageSize: this.pageSize,
          phone: this.receiver,
          code: this.searchcode,
          status: this.status,
          merchantId: JSON.parse(localStorage.userInfo).merchantId
        }).then((res) => {
          for (var i = 0; i < res.list.length; i++) {
            switch (res.list[i].status) {//0关闭1待付款2待发货3已发货 4已收货5已评价 6已完成 20删除
              case 0:
                res.list[i].statuse = '已关闭'
                break
              case 1:
                res.list[i].statuse = '待付款'
                break
              case 2:
                res.list[i].statuse = '待发货'
                break
              case 3:
                res.list[i].statuse = '待收货'
                break
              case 4:
                res.list[i].statuse = '待评价'
                break
              case 5:
                res.list[i].statuse = '已完成'
                break
              case 20:
                res.list[i].statuse = '已删除'
                break
            }
          }
          this.total = res.totalCount;
          this.tableData = res.list;
        }, (err) => {
        }).finally(() => {
          this.loading = false;
        })
      },
      search() {
        this.getList(1, this.status);
      },
      onSubmit(val) {
        this.isactive = val;
        if (val == 'all') {
          val = '';
        }
        this.status = val;
        this.getList(1, this.status);
      },
      delivered(val) {//快递追踪
        this.$http.post('/merchant_order/query_By_Id', {
          id: val,
          merchantId: JSON.parse(this.$store.getters.userInfo).merchantId
        }).then((res) => {
          this.company = res.sendCompany
          this.code = res.sendCode;
          this.dialogVisibled = true;
        })
      },
      next(val) {
        this.valpage = val;
        this.getList(val, this.status);
      },
      close(id) {
        this.$confirm('确定关闭订单嘛', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then((result) => {
          this.$http.post('/merchant_order/update', {
            id: id,
            status: 0,
            merchantId: JSON.parse(this.$store.getters.userInfo).merchantId
          }).then((res) => {
            this.getList(this.valpage);
            this.$msgSuc("关闭成功");
          })
        })
      },
      deliver(val) {//发货
        this.dialogVisible = true;
        this.id = val;
      }, add() {

        if (this.sendCompany == "") {
          this.$msgErr("请输入快递公司");
          return false;
        }
        if (this.sendCode == "") {
          this.$msgErr("请输入快递单号");
          return false;
        }
        this.$http.post('/merchant_order/update', {
          id: this.id,
          status: 3,
          sendCompany: this.sendCompany,
          sendCode: this.sendCode,
          merchantId: JSON.parse(this.$store.getters.userInfo).merchantId
        }).then((res) => {
          this.getList(this.valpage);
          this.sendCompany = '';
          this.sendCode = '';
          this.dialogVisible = false;
          this.$msgSuc("发货成功");
        })
      },
      delete(val) {
        this.$confirm('确定关闭订单嘛', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then((result) => {
          this.$http.post('/merchant_order/update', {
            id: id,
            status: 20,
            merchantId: JSON.parse(this.$store.getters.userInfo).merchantId
          }).then((res) => {
            this.getList(this.valpage);
            this.$msgSuc("删除成功");
          })
        })
      },
      exportExcel() {
        let date = new Date().getTime()
        //let o =
        var wb = XLSX.utils.table_to_book(document.querySelector('#aaa'))
        /* get binary string as output */
        var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        try {
          FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), date + '.xlsx')
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "~@/assets/css/common";

  .mall-btn.active em{
    color: #fff;
  }
  em {
    font-style: normal;
    color: red;
    margin: 0 2px;
  }
  .filter-wrap {
    border: $border;
    margin-bottom: 24px;
    margin-top: 30px;
    img {
      width: 20px;
      margin-bottom: -6px;
    }
    > div {
      padding: 0 22px;
      height: 56px;
      &:last-child {
        background-color: $bgColor;
      }
    }
    .search-input{
      width: 200px;
      margin: 0 15px;
    }
  }
  .mall-btn{
    height: auto;
    font-size: 14px;
    padding: 0 18px;
  }
  .search {
    margin-left: 20px;
    margin-right: 0;
  }
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }

  /deep/ {
    .el-dialog {
      width: 500px;
    }
    .el-form-item__label {
      display: inline-block;
      width: 100px;
    }
  }
</style>
